<template>
  <my-div class="create">
     <!-- <div class="head_top wrapper">
        <image style="width:30px;height:30px;" src="root:img/share/close@2x.png" @click="close"></image>
    </div> -->
    <div class="head">
      <image style="width:100px;height:60px;" src="root:img/create/logo@2x.png"></image>
      <my-text night_color="#fff" day_color="color:rgba(19,32,63,1)" :text="$t('login.create_wallet')" style="font-size:36px;margin-top:24px;"></my-text>
    </div>
    <div class="create-form">
      <div class="login-input">
        <input type="text" :color='inputText.color'  :placeholder="$t('wallet.id_card')" class="login-input-inner" v-model="form.name" @blur="check_name(form.name)" />
      </div>
      <div class="login-input">
        <input type="text" disabled  :color='inputText.color' :placeholder="$t('wallet.register')" class="login-input-inner" v-model="form.inviter" />
      </div>
      <div class="login-agree">
         <!-- <input type="radio" :color='inputText.color'  class="login-input-inner"/> -->
        <div class="radio" @click="check=!check" :style="[{'background-color':check?'rgba(70,120,245,1)':'#ffffff'}]"></div>
        <div class="login-dec" @click="check=!check">
          <text style="color:rgba(153,153,153,1);font-size:24px;">我已阅读并同意</text>
          <text style="color:rgba(70,120,245,1);font-size:24px;">《用户协议》</text>
        </div>
      </div>
    </div>
    <div class="login-btn" @click="create_wallet" >
      <text style="color:#ffffff;font-size:24px;text-align: center;line-height:74px;
      ">{{$t('login.create')}}</text>
    </div>
  </my-div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      form:{
        name:'',
        inviter:''
      },
      check:false
    }
  },
  created() {
    const p = this.$route.query
    this.form.inviter = this.$route.query.inviter
  },
  methods: {
    toggle_check(){
      this.check = true
    },
    // 检测用户名是否重复
    check_name(name){
      if(this.form.name.trim().length<8) return this.toast('用户名必须8位以上')
       this.$ajax.get('/api/wallet/checkUserName',{
         params:{username:name}
       }).then(
         (res)=>{
         if(!name) return
         if(res.data.have) return this.toast('用户名已存在')
       })
    },
    // 创建钱包
    create_wallet(){
      if(!this.form.name) return this.toast(this.$t('common.null')+this.$t('wallet.id_card'))
      if(this.form.name.trim().length<8) return this.toast('用户名必须8位以上')
      if(!this.check)return this.toast('请勾选用户协议')
      // const l = Object.keys(ac)
      const p = {
        name:this.form.name,
        password:this.form.pw,
        device_id:'',
      }
       this.$progress.show()
       this.$ajax.get('/api/wallet/checkUserName',{params:{username:this.form.inviter}}).then((res)=>{
          const d1 = res.data
          if(!d1.have) {
            this.$progress.dismiss()
            return this.toast('推荐人不存在')
          } 
           this.$ajax.get('/api/wallet/checkUserName',{params:{username:this.form.name}}).then(
            (res)=>{
              const d2 = res.data
                if(d2.have) {
                  this.$progress.dismiss()
                  return this.toast('用户名已存在')
                }
                this.$ajax.post('/api/wallet/createWallet',p).then(
                  (res)=>{
                  this.$progress.dismiss()
                  const data = res.data&&res.data.result
                  this.$router.push({path:'/h5/word.js',query:{name:this.form.name,master_key:data.master_key,master_seed:data.master_seed,inviter:this.form.inviter,public_key_hex:data.public_key_hex,account_id:data.account_id}})
              }
                )
          })
       })
     
      

    },
    close(){
      var userAgent = navigator.userAgent; 
        if (userAgent.indexOf('Firefox') != -1 || userAgent.indexOf("Chrome") !=-1) { 
        window.location.href='about:blank'; 
        }else if(userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1){ 
        window.opener=null;window.open('about:blank','_self').close(); 
        }else { 
        window.opener = null; 
        window.open('about:blank', _self); 
        window.close(); 
        } 
    }
  }
}
</script>
<style scoped>
  .wrapper{
    display: flex;
    flex-direction: row;
  }
.create{
  width: 750px;
  flex: 1;
  /* position: absolute; */
  /* top: 0;
  bottom: 0;
  left: 0; */
}
.head_top{
  width: 750px;
  padding-left: 30px;
  padding-right: 30px;
  height: 100px;
  align-items: center;
}
.head{
  margin-top: 80px;
  width: 690px;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-dec{
  display: flex;
  flex-direction: row;
  margin-top: 34px;
  margin-left: 72px;
}
.radio{
  transition: .5 all;
  width: 30px;
  height: 30px;
  margin-top: 34px;
  margin-left: 30px;
  border-radius: 15px;
  position: absolute;
  border-bottom-width: 1px;
  border-bottom-color: rgba(233,233,233,1);
  border-bottom-style: solid;
  border-top-width: 1px;
  border-top-color: rgba(233,233,233,1);
  border-top-style: solid;
  border-left-width: 1px;
  border-left-color: rgba(233,233,233,1);
  border-left-style: solid;
  border-right-width: 1px;
  border-right-color: rgba(233,233,233,1);
  border-right-style: solid;
}
.login-agree{
  display: flex;
  flex-direction: row;
}
.create-form{
  margin-top: 92px;
}
.login-input{
  width: 690px;
  margin-left: 30px;
  height: 90px;
  border-bottom-width: 1px;
  border-bottom-color: rgba(233,233,233,1);
  border-bottom-style: solid;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.login-input-inner{
  width: 620px;
  font-size: 28px;
  height: 80px;
}
.login-btn{
  width: 690px;
  height: 80px;
  background-color: rgba(70,120,245,1);
  margin-top: 100px;
  border-radius: 10px;
  position: absolute;
  bottom: 140px;
  left: 30px;
}
</style>
